<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web防火墙 - 实时日志监控</title>
    <link rel="stylesheet" href="test.css">
    <!-- 引入 Chart.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <div class="logo-icon">🛡️</div>
                <div class="logo-text">
                    <h1>Web防火墙监控系统</h1>
                    <p>实时HTTP请求日志监控</p>
                </div>
            </div>
            <div class="status">
                <div class="status-indicator"></div>
                <span class="status-text">正在连接...</span>
            </div>
        </header>
        
        <div class="dashboard">
            <div class="card stat-card">
                <h2>总请求数</h2>
                <div class="value" id="total-requests">0</div>
            </div>
            <div class="card stat-card">
                <h2>拦截请求数</h2>
                <div class="value" id="blocked-requests">0</div>
            </div>
            <div class="card stat-card">
                <h2>在线客户端</h2>
                <div class="value" id="active-clients">0</div>
            </div>
            <!-- 新增实时请求速率统计卡片 -->
            <div class="card stat-card">
                <h2>实时请求速率</h2>
                <div class="value" id="request-rate">0</div>
            </div>
        </div>
        
        <!-- 新增HTTP流量动态监控图表 -->
        <div class="card">
            <h2>HTTP流量动态监控</h2>
            <canvas id="traffic-chart"></canvas>
        </div>
        
        <div class="filters">
            <div class="filter">
                <label for="method-filter">HTTP方法</label>
                <select id="method-filter">
                    <option value="all">全部方法</option>
                    <option value="GET">GET</option>
                    <option value="POST">POST</option>
                    <option value="PUT">PUT</option>
                    <option value="DELETE">DELETE</option>
                </select>
            </div>
            <div class="filter">
                <label for="status-filter">状态码</label>
                <select id="status-filter">
                    <option value="all">全部状态</option>
                    <option value="200">200 OK</option>
                    <option value="404">404 Not Found</option>
                    <option value="500">500 Server Error</option>
                    <option value="blocked">已拦截</option>
                </select>
            </div>
            <div class="filter">
                <label for="ip-filter">客户端IP</label>
                <input type="text" id="ip-filter" placeholder="输入IP地址过滤...">
            </div>
        </div>
        
        <div class="search-bar">
            <input type="text" id="search-input" placeholder="搜索请求URI...">
            <button id="search-btn">搜索</button>
        </div>
        
        <div class="logs-container">
            <div class="logs-header">
                <div>客户端IP</div>
                <div>方法</div>
                <div>URL</div>
                <div>状态</div>
                <div>端口</div>
                <div>时间戳</div>
            </div>
            <div class="logs-list" id="logs-list">
                <div class="no-logs">正在等待日志数据...</div>
            </div>
        </div>
    </div>

    <script src="test.css"></script>
</body>
</html>